<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: [wangll]
 * @LastEditTime: 2021-09-23 18:56:49
-->
<template>
<!-- 写在vue中的template标签里只允许存在一个父级div -->
  <div>
    <!-- 头部开始 -->
    <!-- 
      1.创建一个公共组件：
        头部结构 头部样式
      2.使用公共组件
        1）引入到使用的vue页面中
        2）注册组件 components:{Header}
        3）使用组件
     -->
    <!-- <Header/> -->
    <Header></Header>
    <!-- 头部结束 -->

    <!-- 体部开始 -->
    <div class="content">
      <!-- 轮播图 -->
      <!-- {{carousels}} -->
      <div class="carousel">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <img :src="item.url" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 板块 -->
      <div class="plates">
        <div class="wrapper">
          <!-- {{categoryList}} -->
          <div class="plate" v-for="cas in categoryList" :key="cas.category.id">
            <div class="head">
              <div class="title">{{cas.category.name}}</div>
              <div class="more">更多&gt;&gt;</div>
            </div>
            <ul class="list">
              <li v-for='a in cas.aritcle' @click="toDetail(a.id)" :key='a.id'>{{a.title}}</li>
            </ul>
            
          </div>
        </div>
      </div>
    </div>
    <!-- 体部结束 -->

    <!-- 底部开始 -->
    <!-- <Footer></Footer> -->
    <Footer/>
    <!-- 底部结束 -->

  </div>
</template>


<style lang="scss">
// scss嵌套语法


  //体部样式
  .content{
    background-color:#cbe3e5 ;
    .carousel{
      margin-bottom: 3em;
      img{
        width: 100%;
      }
    }
    .plates{
      & > .wrapper::after{
        display: block;
        content: '';
        clear: both;
      }
      .plate{
        float: left;
        width: 32.5%;
        height: 300px;
        background-color: #fff;
        margin-right: 1.25%;
        margin-bottom: .8em;
        ul.list>li{
          line-height: 3em;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        ul>li:hover{
          color: #057d7c;
          cursor: pointer;
        }
        .head{
          display: flex;
          justify-content: space-between;
          .title{
            font-size: 18px;
            font-weight: bold;
            color: #057d7c;
            cursor: pointer;
          }
          .more{
            color: #999;
            cursor: pointer;
          }
        }
      }
      .plate:nth-child(3n){
        margin-right: 0;
      }
    }
  }


</style>


<script>
//引入
import {get} from '../utils/request';
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
export default {
  //注册组件
  components:{
    // Header:Header
    Header,
    Footer
  },
  // 存放vue的一个变量
  data(){
    return{
      carousels:[],
      categoryList:[]
    }
  },
  // 生命周期 钩子函数
  // vue代码在各个阶段执行的函数
  created(){
    this.loadCarousel(),
    this.loadArticle()
  },
  // 写一些方法和事件处理程序
  methods:{
    //跳转文章
    toDetail(id){
      this.$router.push({
        path:'/article',
        query:{id}
      })
    },
    //加载文字
    loadArticle(){
      let url='/index/article/findCategoryArticles';
      get(url).then(res=>{
        // console.log(res);
        this.categoryList=res.data;
      })
    },
    //加载轮播图
    loadCarousel(){
      let url='/index/carousel/findAll';
      // es6箭头函数
      //(a)=>{b}        
      //function(a){b}
      get(url).then(res=>{
        // es6箭头函数没有this指向--this指向vue实例
        this.carousels=res.data;
      })
    }
  },

}
</script>

